This blog post contains some tips I learned while migrating some JavaScript files to TypeScript of an open-source project. A Brief Introduction To TypeScript For those who may have never heard of TypeScript, It is a programming language originally developed and maintained by Microsoft that first appeared in October 2012. In terms of functionalities, TypeScript is just JavaScript plus some other features which include assigning static types to variables. Some Notes on TypeScript Because TypeScript is just a superset of JavaScript, every JavaScript code is a valid TypeScript code TypeScript files usually have the extension .ts TypeScript code is compiled to plain JavaScript code which is what browsers understand (Browsers don’t understand TypeScript). The good news is, if you know JavaScript, you already know a lot about TypeScript. Type System in TypeScript The use of a type system in any programming language is to check the validity of the supplied values before they are stored or manipulated by the program. This prevents the program from having any unexpected behaviors and ensures that the code behaves as expected. In TypeScript, you can assign types to the declared variables in the following way : let firstName: string = "ismail"; You can see more details about TypeScript and types in TypeScript on their very good official documentation Convert a JavaScript File to TypeScript Before you start migrating, you must make sure to have certain configurations set up very early in your project. This includes setting up the file and integrating TypeScript with all the tools you intend to use. You can check for further information. tsconfig.json this page TypeScript Configuration File Here is a good explanation of the role of the TypeScript configuration file from the official documentation: The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project. You can generate that file in your project with this simple command tsc --init You don’t have to use all the options present in the file generated. You can use only the options you need. Here is a simple boilerplate configuration file that you can use to start off your project { "include": ["./src/**"], "compilerOptions": { "target": "es2020", "module": "es2020", "moduleResolution": "node", "allowJs": true, "strict": true, "noEmit": true } } In this configuration file, you mainly tell the TypeScript compiler to take into account all the files in the src folder and to compile them in the ES2020 syntax. Start Migrating Your JavaScript Files to TypeScript Firstly, you don’t necessarily have to migrate all your JavaScript files. You can keep some in JavaScript format if you want. The first step in migrating to TypeScript is to rename your JavaScript files from to . If you are using JSX, you have to rename your file to . If you open your newly created file in some code editor supporting TypeScript, you might see some errors showing up. Your objective will be to get rid of those errors while still staying as close as possible to the TypeScript features. .js .ts .tsx Cannot find a module The first error you might encounter is some modules that might not be found in your import statements. This just means that the modules aren’t defined in the declaration file in your project. What you have to do is install those missing modules prefixed by . A package name prefixed by is, simply put, just a customized version of that package for TypeScript. As an example, if TypeScript does complain that React is missing, you can fix that easily by installing @types/react in the following way @types @types npm install --save-dev @types/react Dealing with Types As we previously mentioned, one big advantage of using TypeScript is assigning types to variables. Doing so increases the readability of the program and makes it less prone to having bugs. Below are some remarks to keep in mind when you will be assigning types to variables. The type is the supertype of all types in TypeScript. It refers to a dynamic type. Using the type is equivalent to removing type checking for a variable. This should be used only as a last resort because you won’t be benefiting from type checking when using it. Dealing with the “ ” type : any any any When some variable in your code can be null or undefined, you can explicitly tell TypeScript that it isn’t with the exclamation mark. Dealing with null or undefined : function computeGlobalGrade(studentName: string | undefined | null) { const nameOne: string = studentName; // Typescript will complain that the student name might be null and cannot be assigned to a string const nameTwo: string = studentName!; // compiles fine because you tell compiler that null | undefined are excluded } If you have a list of properties like in a JavaScript Object, you can type them using either the keyword or by creating an . Both are correct usages, but using interfaces provides the additional benefit usually used in Object-Oriented programming languages that they can be extended. Typing a list of properties : type interface As an example, if you are converting a React component from JSX to TSX, and there is a PropTypes list defined like in the following : const propTypes = { i18nCertText: PropTypes.string, isProjectsCompleted: PropTypes.bool, steps: PropTypes.string, superBlock: PropTypes.string }; You can convert that using either an in your TypeScript file as shown below interface interface ClaimCertStepsProps { i18nCertText: string; isProjectsCompleted: boolean; steps: string; superBlock: string; } or using the keyword as shown below type type ClaimCertStepsProps = { i18nCertText: string; isProjectsCompleted: boolean; steps: string; superBlock: string; } and then use that in your component in the following way const ClaimCertSteps = ({ isProjectsCompleted, i18nCertText, steps, superBlock }: ClaimCertStepsProps): JSX.Element => { // code of the component } Adding a List of Properties To an Object One typical block of code we find in JavaScript programs is dynamically adding properties to an object like so let students = {}; students.name = "ismail"; students.age = 15; If you use the same code in TypeScript, the compiler will complain that the name and age properties does not exist on the students variable which has the type {}. To get rid of that error, you can define the properties inside the object like so : let student = { name: "ismail", age: 15, } Or you can define the types of the properties in a separate interface like so : interface SudentProperties { name?: string, age?: number } let student: SudentProperties = {}; student.name = "ismail"; student.age = 15; Final words Migrating a project to TypeScript is not that much of a hassle. As every JavaScript code is a valid TypeScript code, you can choose to only convert the files where you need strict typing and then go over the remaining files as you want. The list above of tips is far from being exhaustive. There is a on the official TypeScript documentation that provides more information. guide If this post was helpful to you in any way, please don't hesitate to share it. You can also follow or visit if you would like to see more content related to web programming. my Twitter account my website
