{"id":15190,"date":"2024-04-01T17:08:49","date_gmt":"2024-04-01T13:38:49","guid":{"rendered":"https:\/\/www.itpiran.net\/blog\/?p=15190"},"modified":"2024-04-01T17:08:49","modified_gmt":"2024-04-01T13:38:49","slug":"typescript-new-projectstep-1-starting-the-typescript-project","status":"publish","type":"post","link":"https:\/\/www.itpiran.net\/blog\/en\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/","title":{"rendered":"How to start a new TypeScript project"},"content":{"rendered":"<h2 id=\"%d9%85%d9%82%d8%af%d9%85%d9%87\">Introduction<\/h2>\n<p>You may have already worked with TypeScript when using a starter project or a tool like Angular CLI. In this tutorial, you&#039;ll learn how to set up a TypeScript project without the help of a starter. You&#039;ll also learn how compilation works in TypeScript and how to use a linter in your TypeScript project.<\/p>\n<h5 id=\"%d9%be%db%8c%d8%b4-%d9%86%db%8c%d8%a7%d8%b2%d9%87%d8%a7\">Prerequisites<\/h5>\n<ul>\n<li>The latest version of Node installed on your device.<\/li>\n<li>Getting to know\u00a0 <code>npm<\/code><\/li>\n<\/ul>\n<h2 id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87-1-%d8%b4%d8%b1%d9%88%d8%b9-%d9%be%d8%b1%d9%88%da%98%d9%87-typescript\">Step 1 \u2013 Start a TypeScript project<\/h2>\n<p>To start your TypeScript project, you need to create a directory for your project:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\">mkdir typescript-project<\/pre>\n<\/div>\n<p>Now change to your project directory:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>cd typescript-project<\/code><\/pre>\n<\/div>\n<p>You can install TypeScript by setting up your project directory:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>npm i typescript --save-dev<\/code><\/pre>\n<\/div>\n<p>It is important that the flag <code>--save-dev<\/code> Add TypeScript as it stores TypeScript as a development dependency. This means that TypeScript is required for development of your project.<\/p>\n<p>With TypeScript installed, you can initialize your TypeScript project using the following command:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>npx tsc --init<\/code><\/pre>\n<\/div>\n<p><code>npm<\/code> It also has a tool called <code>npx<\/code> which executes executable packages. <code>npx<\/code> It allows us to run packages without the need for a global installation.<\/p>\n<p>Order <code>tsc<\/code> It is used here because it is the built-in compiler for TypeScript. When you write code in TypeScript, the execution <code>tsc<\/code> It converts or compiles your code into JavaScript.<\/p>\n<p>Using the flag <code>--init<\/code> In the above command, your project is initialized by creating a tsconfig.json file in your TypeScript project directory. This tsconfig.json file allows you to do further configuration and how TypeScript and the compiler interact. <code>tsc<\/code> Customize. You can remove, add, and modify configurations in this file to best meet your needs.<\/p>\n<p><code>tsconfig.json<\/code> Open it in your editor to find the default configuration:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>nano tsconfig.json<\/code><\/pre>\n<\/div>\n<p>There will be many options, most of which are explained below:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-ts\" data-lang=\"TypeScript\"><code>{\r\n\"compilerOptions\": {\r\n\/* Visit https:\/\/aka.ms\/tsconfig.json to read more about this file *\/\r\n\/* Projects *\/\r\n\/\/ \"incremental\": true, \/* Enable incremental compilation *\/\r\n\/\/ \"composite\": true, \/* Enable constraints that allow a TypeScript project to be used with project references. *\/\r\n\/\/ \"tsBuildInfoFile\": \".\/\", \/* Specify the folder for .tsbuildinfo incremental compilation files. *\/\r\n\/\/ \"disableSourceOfProjectReferenceRedirect\": true, \/* Disable preferring source files instead of declaration files when referencing composite projects *\/\r\n\/\/ \"disableSolutionSearching\": true, \/* Opt a project out of multi-project reference checking when editing. *\/\r\n\/\/ \"disableReferencedProjectLoad\": true, \/* Reduce the number of projects loaded automatically by TypeScript. *\/\r\n. . .\r\n}\r\n}<\/code><\/pre>\n<\/div>\n<p>You can customize your TypeScript configuration via the tsconfig.json file. For example, you might uncomment the outDir entry and set it to \u201c.\/build\u201d, which will place all of your compiled TypeScript files in that directory.<\/p>\n<p>By installing TypeScript and installing the file <code>tsconfig.json<\/code>Now you can move on to coding the TypeScript application and compiling it.<\/p>\n<h2 id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87-2-%da%a9%d8%a7%d9%85%d9%be%d8%a7%db%8c%d9%84-%d9%be%d8%b1%d9%88%da%98%d9%87-typescript\">Step 2 \u2013 Compile the TypeScript project<\/h2>\n<p>Now you can start coding your TypeScript project. Create a new file called <code>index.ts<\/code> Open it in your editor. Paste the following TypeScript code in <code>index.ts<\/code> Write:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-ts\" data-lang=\"TypeScript\"><code>const world = 'world';\r\nexport function hello(who: string = world): string {\r\nreturn `Hello ${who}! `;\r\n}<\/code><\/pre>\n<\/div>\n<p>With this TypeScript code in place, your project is ready to compile. Run tsc from your project directory:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>npx tsc<\/code><\/pre>\n<\/div>\n<p>You will notice that the compiled JavaScript file index.js and the sourcemap file index.js.map are both added to the build folder, if you specified it in the tsconfig.js file.<\/p>\n<p><code>index.js<\/code> Open it and you will see the following compiled JavaScript code:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-ts\" data-lang=\"TypeScript\"><code>\"use strict\";\r\nObject.defineProperty(exports, \"__esModule\", { value: true });\r\nexports.hello = void 0;\r\nconst world = 'world';\r\nfunction hello(who = world) {\r\nreturn `Hello ${who}! `;\r\n}\r\nexports.hello = hello;<\/code><\/pre>\n<\/div>\n<p>Running the TypeScript compiler every time you make a change can be tedious. To fix this, you can put the compiler in watch mode, which will recompile your code every time a change is made.<\/p>\n<p>You can enable watch mode using the following command:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>npx tsc -w<\/code><\/pre>\n<\/div>\n<p>You have learned how the TypeScript compiler works and can now successfully compile your TypeScript files. You can take your TypeScript projects to the next level by introducing a linter into your workflow.<\/p>\n<h2 id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87-3-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-google-typescript-style-%d8%a8%d8%b1%d8%a7%db%8c-%d9%be%d8%b1-%da%a9%d8%b1%d8%af%d9%86-%d9%88-%d8%aa\">Step 3 \u2013 Use Google TypeScript Style to fill and correct your code<\/h2>\n<p>Using a linter when coding helps you quickly find inconsistencies, syntax errors, and omissions in your code. Additionally, a style guide not only helps you ensure that your code is well-formed and consistent, but it also allows you to use additional tools to enforce that style. A popular tool for this is eslint, which works well with many IDEs to aid in the development process.<\/p>\n<p>Once you have your project up and running, you can use other tools in the TypeScript ecosystem to help you avoid having to manually set up your tsconfig.json file. Google TypeScript Style is one of those tools. Google TypeScript Style, also known as GTS, is a style guide, inline stylesheet, and automatic code corrector all in one. Using GTS helps you quickly boot up a new TypeScript project and avoid having to worry about small, organizational details to focus on the design of your project. GTS also provides default settings. This means you won\u2019t need to customize many settings.<\/p>\n<p>Start by installing GTS:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>npm i gts --save-dev<\/code><\/pre>\n<\/div>\n<p>From here, initialize the GTS using the following command:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>npx gts init<\/code><\/pre>\n<\/div>\n<p>The above command will create everything you need to get started with your TypeScript, including a tsconfig.json file and a linting setup. A package.json file will also be created if you don&#039;t already have one.<\/p>\n<p>Running npx gts init also adds useful npm scripts to your package.json file. For example, you can now run npm run compile to compile your TypeScript project. To check for curtain errors, you can now run npm run check.<\/p>\n<p>GTS is now installed and properly integrated into your TypeScript project. Using GTS in future projects will allow you to quickly set up new TypeScript projects with the necessary settings.<\/p>\n<p>Since GTS offers a no-configuration, opinion-based approach, it uses its own sensible rules. These follow best practices, but if you need to change the rules in any way, you can do so by extending the default eslint rules. To do this, create a file in your project directory called .eslintrc that extends the style rules:<\/p>\n<div class=\"hcb_wrap\" data-no-translation=\"\" data-no-auto-translation=\"\">\n<pre class=\"prism line-numbers lang-plain\" data-lang=\"Plain Text\"><code>---\r\nextends:\r\n- '.\/node_modules\/gts'<\/code><\/pre>\n<\/div>\n<p>This allows you to add or modify the style rules provided by GTS.<\/p>\n<h2 id=\"%d9%86%d8%aa%db%8c%d8%ac%d9%87\">Result<\/h2>\n<p>In this tutorial, you started a TypeScript project with custom settings. You also integrated Google TypeScript Style into your TypeScript project. Using GTS helps you get up and running quickly with a new TypeScript project. With GTS, you don&#039;t need to manually set up the configuration or integrate a linter into your workflow.<\/p>","protected":false},"excerpt":{"rendered":"Introduction You may have already worked with TypeScript when using a starter project or a tool like Angular CLI.","protected":false},"author":1,"featured_media":15191,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,363],"tags":[416,366],"class_list":{"0":"post-15190","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-programming","9":"tag-typescript","10":"tag-366"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 TypeScript \u062c\u062f\u06cc\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645 - \u0628\u0644\u0627\u06af ITPiran<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.itpiran.net\/blog\/en\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 TypeScript \u062c\u062f\u06cc\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645 - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0642\u0628\u0644\u0627\u064b \u0647\u0646\u06af\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0634\u0631\u0648\u0639 \u06cc\u0627 \u0627\u0628\u0632\u0627\u0631\u06cc \u0645\u0627\u0646\u0646\u062f Angular CLI \u0628\u0627 TypeScript \u06a9\u0627\u0631&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/en\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-01T13:38:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2024\/04\/01170716\/Type-Script.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/typescript-new-projectstep-1-starting-the-typescript-project\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/typescript-new-projectstep-1-starting-the-typescript-project\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"\u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 TypeScript \u062c\u062f\u06cc\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645\",\"datePublished\":\"2024-04-01T13:38:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/typescript-new-projectstep-1-starting-the-typescript-project\\\/\"},\"wordCount\":108,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/typescript-new-projectstep-1-starting-the-typescript-project\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/04\\\/01170716\\\/Type-Script.jpg\",\"keywords\":[\"typeScript\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/typescript-new-projectstep-1-starting-the-typescript-project\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/typescript-new-projectstep-1-starting-the-typescript-project\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/typescript-new-projectstep-1-starting-the-typescript-project\\\/\",\"name\":\"\u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 TypeScript \u062c\u062f\u06cc\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645 - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/typescript-new-projectstep-1-starting-the-typescript-project\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/typescript-new-projectstep-1-starting-the-typescript-project\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/04\\\/01170716\\\/Type-Script.jpg\",\"datePublished\":\"2024-04-01T13:38:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/typescript-new-projectstep-1-starting-the-typescript-project\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/typescript-new-projectstep-1-starting-the-typescript-project\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/typescript-new-projectstep-1-starting-the-typescript-project\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/04\\\/01170716\\\/Type-Script.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/04\\\/01170716\\\/Type-Script.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/typescript-new-projectstep-1-starting-the-typescript-project\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 TypeScript \u062c\u062f\u06cc\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/en\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Start a New TypeScript Project - ITPiran Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.itpiran.net\/blog\/en\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/","og_locale":"en_US","og_type":"article","og_title":"\u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 TypeScript \u062c\u062f\u06cc\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645 - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0642\u0628\u0644\u0627\u064b \u0647\u0646\u06af\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0634\u0631\u0648\u0639 \u06cc\u0627 \u0627\u0628\u0632\u0627\u0631\u06cc \u0645\u0627\u0646\u0646\u062f Angular CLI \u0628\u0627 TypeScript \u06a9\u0627\u0631&hellip;","og_url":"https:\/\/www.itpiran.net\/blog\/en\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2024-04-01T13:38:49+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2024\/04\/01170716\/Type-Script.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"\u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 TypeScript \u062c\u062f\u06cc\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645","datePublished":"2024-04-01T13:38:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/"},"wordCount":108,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/04\/01170716\/Type-Script.jpg","keywords":["typeScript","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/","name":"How to Start a New TypeScript Project - ITPiran Blog","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/04\/01170716\/Type-Script.jpg","datePublished":"2024-04-01T13:38:49+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2024\/04\/01170716\/Type-Script.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2024\/04\/01170716\/Type-Script.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/typescript-new-projectstep-1-starting-the-typescript-project\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"\u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 TypeScript \u062c\u062f\u06cc\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"ITPiran Blog","description":"Iranian Sustainable Trade News and Articles","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Sustainable Iranian Business Blog","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"admin","url":"https:\/\/www.itpiran.net\/blog\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/posts\/15190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/comments?post=15190"}],"version-history":[{"count":1,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/posts\/15190\/revisions"}],"predecessor-version":[{"id":15192,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/posts\/15190\/revisions\/15192"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/media\/15191"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/media?parent=15190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/categories?post=15190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/en\/wp-json\/wp\/v2\/tags?post=15190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}