TypeScript is a statically typed superset of JavaScript that helps you write more maintainable and error-free code by adding type annotations to your JavaScript code. To get started with TypeScript, you’ll need to install it, configure it, and create TypeScript files.<\/p>\n
To start using TypeScript, you need to have Node.js<\/strong> installed on your machine. TypeScript can be installed globally or as a project dependency. It’s recommended to install it locally within your project, which allows you to have different TypeScript versions for different projects.<\/p>\n To install TypeScript locally, open your terminal and navigate to your project folder, then run:<\/p>\n or<\/span><\/p>\n Make sure to commit the generated lockfile to ensure that every team member uses the same version of TypeScript.<\/p>\n To run the TypeScript compiler, you can use the following commands<\/p>\n This command installs TypeScript as a development dependency in your project.<\/p>\n installing it globally:<\/span><\/p>\n TypeScript uses a configuration file called tsconfig.json<\/strong> to manage various settings for your project. You can create this file manually or use the TypeScript compiler’s –init flag to generate a basic configuration file.<\/p>\n To generate a tsconfig.json file, run the following command in your project directory:<\/p>\n When executing the tsc command locally, TypeScript will compile the code using the configuration specified in the nearest tsconfig.json<\/strong> file.<\/p>\n Here are some examples of CLI commands that run with the default settings:<\/p>\n This will create a tsconfig.json file with default settings.<\/p>\n TypeScript Configuration File (tsconfig.json):<\/strong><\/p>\n The tsconfig.json file is where you specify TypeScript compiler options for your project. Here are some common options you might configure:<\/p>\n target:<\/strong> This option specifies the ECMAScript target version for your code. It determines which version of JavaScript TypeScript should transpile your code to. For example, “target”: “ES6” generates ES6 code.<\/p>\n lib:<\/strong> Specifies the library files that TypeScript should include when compiling. It’s an array of strings that represent the standard libraries you want to use. For example, “lib”: [“ES6”, “DOM”] includes ES6 and DOM types.<\/p>\n strict:<\/strong> Enabling strict mode (“strict”: true) enables a set of strict type checking options. This is recommended for catching more type-related errors.<\/p>\n module:<\/strong> Specifies the module system to use. Common options include “CommonJS”, “ES6”, or “AMD”.<\/p>\n moduleResolution:<\/strong> Determines how TypeScript resolves module import statements. Common values are “node” or “classic”.<\/p>\n node Example:<\/p>\n If <\/span> classic Example:<\/p>\n<\/div>\n In the same directory structure as before, if you have main.ts importing math.ts like this:<\/p>\n esModuleInterop:<\/strong> Set this to true if you want TypeScript to generate code that is compatible with ES modules when using import and export in your code.<\/p>\n Consider the following project structure:<\/p>\n With “moduleResolution”: “node”<\/strong>, TypeScript will use Node.js module resolution, which prioritizes the node_modules<\/strong> directory. When you import math in main.ts:<\/p>\n jsx:<\/strong> If you are working with JSX (React), you can configure this option accordingly. For React, use “jsx”: “react”.<\/p>\n skipLibCheck:<\/strong> Set this to true to skip type checking of declaration files (.d.ts files) in your project.<\/p>\n Here’s an example of how to use the “skipLibCheck” option in your tsconfig.json file<\/p>\n files:<\/strong> An array of file paths to be included explicitly in the compilation.<\/p>\n include:<\/strong> An array of file globs that specify which files should be included in the compilation process.<\/p>\n Assuming you have a project structure like this:<\/p>\n You can configure your tsconfig.json as follows:<\/p>\n exclude:<\/strong> An array fof file globs that specify which files should be excluded from the compilation process.<\/p>\n Now that you have TypeScript configured, you can create .ts files and start writing TypeScript code. TypeScript will use the configuration settings from tsconfig.json to transpile your code into JavaScript.<\/p>\n To compile your TypeScript code, run:<\/p>\n This command will transpile your TypeScript files into JavaScript according to the settings in your tsconfig.json file.<\/p>\n That’s the basic process of getting started with TypeScript. You can customize your tsconfig.json file and explore TypeScript’s rich type system to enhance your development experience.<\/p>\n You can also discover a lot about\u00a0<\/span>Javascript by exploring\u00a0<\/span><\/a>different topics.<\/span><\/p>\n Note:<\/strong>\u00a0We welcome your feedback at\u00a0<\/span>Easy Coding School<\/a>. Please don\u2019t hesitate to share your\u00a0<\/span>suggestions<\/a>\u00a0or any issues you might have with the article!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":" Get started with TypeScript: installation, configuration, and coding tips for a smoother development experience.<\/p>\n","protected":false},"author":1,"featured_media":2053,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[4,25,5,175],"tags":[127,108,126,64,182,178],"class_list":["post-2050","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lifestyle","category-programming","category-technology","category-typescript","tag-easy-coding","tag-easy-coding-school","tag-easycoding","tag-easycodingschool","tag-typescript-basic","tag-typescript-tutorial"],"yoast_head":"\nnpm install typescript --save-dev<\/code><\/pre>\n<\/div>\nyarn add typescript --dev<\/code><\/pre>\n<\/div>\nnpx tsc\r\nor\r\nyarn tsc<\/code><\/pre>\n<\/div>\nnpm install -g typescript<\/code><\/pre>\n<\/div>\nConfiguration:<\/h3>\n
tsc --init<\/code><\/pre>\n<\/div>\ntsc main.ts \/\/ Compile a specific file (main.ts) to JavaScript\r\ntsc src\/*.ts \/\/ Compile any .ts files under the 'src' folder to JavaScript\r\ntsc app.ts util.ts --outfile index.js \/\/ Compile two TypeScript files (app.ts and util.ts) into a single JavaScript file (index.js)<\/code><\/pre>\n<\/div>\n\/\/ tsconfig.json\r\n{\r\n\"compilerOptions\": {\r\n\"target\": [\"ES5\", \"ES6\"]\r\n}\r\n}\r\n<\/code><\/pre>\n<\/div>\n\/\/ tsconfig.json\r\n{\r\n\"compilerOptions\": {\r\n\"lib\": [\"ES6\", \"DOM\"]\r\n}\r\n}<\/code><\/pre>\n<\/div>\n\/\/ tsconfig.json\r\n{\r\n\u00a0 \"compilerOptions\": {\r\n\u00a0 \u00a0 \"strict\": true\r\n\u00a0 }\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n\/\/ tsconfig.json\r\n{\r\n\"compilerOptions\": {\r\n\"module\": \"CommonJS\"\r\n}\r\n}<\/code><\/pre>\n<\/div>\n\/\/ tsconfig.json\r\n{\r\n\"compilerOptions\": {\r\n\"moduleResolution\": \"node\"\r\n}\r\n}<\/code><\/pre>\n<\/div>\nLet's say you have the following file structure:\r\n\r\nproject\/\r\n\u251c\u2500\u2500 src\/\r\n\u2502 \u251c\u2500\u2500 main.ts\r\n\u2502 \u251c\u2500\u2500 utils\/\r\n\u2502 \u2502 \u251c\u2500\u2500 math.ts\r\n\u2502 \u2514\u2500\u2500 node_modules\/\r\n\u2502 \u251c\u2500\u2500 lodash\/\r\n\u2502 \u2502 \u251c\u2500\u2500 index.ts\r\n\u2502 \u2514\u2500\u2500 package.json\r\n\u2514\u2500\u2500 tsconfig.json<\/code><\/pre>\n<\/div>\nmain.ts<\/code> imports a module like this:<\/span><\/p>\nimport _ from \"lodash\";<\/code><\/pre>\n<\/div>\n<\/div>\n\/\/ tsconfig.json\r\n{\r\n\"compilerOptions\": {\r\n\"moduleResolution\": \"classic\"\r\n}\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\nimport { add } from \".\/utils\/math\";<\/code><\/pre>\n<\/div>\n<\/div>\nproject\/\r\n\u251c\u2500\u2500 src\/\r\n\u2502 \u251c\u2500\u2500 main.ts\r\n\u2502 \u251c\u2500\u2500 utils\/\r\n\u2502 \u2502 \u251c\u2500\u2500 math.ts\r\n\u2502 \u2502 \u2514\u2500\u2500 math.js\r\n\u251c\u2500\u2500 tsconfig.json<\/code><\/pre>\n<\/div>\n\/\/ tsconfig.json\r\n{\r\n\"compilerOptions\": {\r\n\"moduleResolution\": \"node\"\r\n}\r\n}<\/code><\/pre>\n<\/div>\nimport { add } from \".\/utils\/math\";<\/code><\/pre>\n<\/div>\n\/\/ tsconfig.json\r\n{\r\n\"compilerOptions\": {\r\n\"jsx\": \"react\"\r\n}\r\n}<\/code>You can use preserve, react-native, none<\/pre>\n<\/div>\n\/\/ tsconfig.json\r\n{\r\n\"compilerOptions\": {\r\n\"skipLibCheck\": true\r\n}\r\n}<\/code><\/pre>\n<\/div>\n\/\/ tsconfig.json\r\n{\r\n\"compilerOptions\": {\r\n\"outDir\": \".\/dist\"\r\n},\r\n\"files\": [\r\n\".\/src\/main.ts\",\r\n\".\/src\/utils\/math.ts\"\r\n]\r\n}<\/code><\/pre>\n<\/div>\nproject\/\r\n\u251c\u2500\u2500 src\/\r\n\u2502 \u251c\u2500\u2500 main.ts\r\n\u2502 \u251c\u2500\u2500 utils\/\r\n\u2502 \u2502 \u251c\u2500\u2500 math.ts\r\n\u2502 \u2514\u2500\u2500 deprecated\/\r\n\u2502 \u251c\u2500\u2500 oldCode.ts\r\n\u2502 \u2514\u2500\u2500 deprecatedLib.ts\r\n\u2514\u2500\u2500 tsconfig.json<\/code><\/pre>\n<\/div>\n\/\/ tsconfig.json\r\n{\r\n\"compilerOptions\": {\r\n\"outDir\": \".\/dist\"\r\n},\r\n\"include\": [\r\n\".\/src\/**\/*.ts\" \/\/ Include all TypeScript files under the src directory and its subdirectories\r\n]\r\n}<\/code><\/pre>\n<\/div>\n\/\/ tsconfig.json\r\n{\r\n\"compilerOptions\": {\r\n\"outDir\": \".\/dist\"\r\n},\r\n\"exclude\": [\r\n\".\/src\/deprecated\/**\/*.ts\" \/\/ Exclude all TypeScript files under the deprecated directory and its subdirectories\r\n]\r\n}<\/code><\/pre>\n<\/div>\nWriting TypeScript Code:<\/h3>\n
Compiling TypeScript Code:<\/h3>\n
npx tsc<\/code><\/pre>\n<\/div>\n