TypeScript — Compilation & the TypeScript Compiler

TypeScript provides a command-line utility tsc that compiles (transpiles) TypeScript files (_.ts_) into JavaScript. However, the tsc compiler (short for TypeScript compiler) needs a JSON configuration file to look for TypeScript files in the project and generate valid output files at a correct location.

When you run tsc command in a directory, TypeScript compiler looks for the tsconfig.json file in the current directory and if it doesn’t find one, then it keeps looking up the directory tree until it finds one. The directory where the tsconfig.json is located is considered as the root of the project.

You can manually provide a path to the tsconfig.json file using --project or -p command-line flag. This file doesn’t need to have the tsconfig.json filename if you are using this flag with the exact file path. However, you can also provide the directory path that contains the tsconfig.json file.

$ tsc -p /proj/x/tsconfig.dev.json

If the TypeScript compiler fails to locate this configuration file, you would get an error. But you can provide settings enlisted in this file through the equivalent command-line options which we will cover in the next lesson.

Structure of tsconfig.json

So what does this file contain and what exactly it controls?

{
  "files": [
    "src/lib/person.ts",
    "src/lib/student.ts",
    "src/main.ts"
  ],
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist/development"
  }
}

The tsconfig.json file is a standard JSON file, however, it supports JSON5 specifications, so you can use comments, single quotes, and more. It contains some root-level options and some compiler options. The root-level options are options that are outside of the compilerOptions object, so in the above example, files is a root-level option.

The root-level options control how the project is presented to the TypeScript compiler, such as which TypeScript files to consider for the compilation. The compiler options contain settings for the TypeScript compiler such as where to output the compiled JavaScript files in the project directory.

---

ROOT-LEVEL OPTIONS

These options control how the project is presented to the TypeScript compiler for the compilation and static type analysis. These options must be kept outside compilerOptions object of the tsconfig.json file.

● files

The files array contains the location of the TypeScript files to consider for the compilation. These can be either relative paths or absolute paths on the disk. A relative path is located relative to the location of the tsconfig.json file (AKA root of the project).

/projects/sample/
├── a.ts
├── src/
|  ├── b.ts
|  ├── c.ts
|  ├── ignore.ts
|  └── lib/
|     ├── d.ts
|     └── e.ts
└── tsconfig.json

Let’s consider that we have the above directory structure in our project. As you can see, the TypeScript files (.ts) are located in multiple directories. We want to compile all the .ts files except the ignore.ts file. Hence we would provide relative paths of these files in the files options of tsconfig.json.

// tsconfig.json

{
    "files": [
        "a.ts",
        "src/b.ts",
        "./src/c.ts",
        "src/lib/d.ts",
        "./src/lib/e.ts"
    ]
}

You can also provide absolute paths of these files but relative paths are most recommended since they would be consistent on all the systems. All the relative paths are resolved against the path of tsconfig.json file in the project. You can optionally provide ./ or ../ prefix to locate the file.

Since we haven’t provided any compilerOptions values, all the default values for the compiler options are used which we will talk about in a bit. The TypeScript compiler compiles these files and outputs the JavaScript with .js extension by keeping the same file name as the individual input file.

The TypeScript compiler also preserves the original file path, hence the .js output file will be generated where the input file was in the directory structure. When you run the tsc command from the directory where your tsconfig.json file is located, you are going to see the result below.

/projects/sample/
├── a.js
├── a.ts
├── src/
|  ├── b.js
|  ├── b.ts
|  ├── c.js
|  ├── c.ts
|  ├── ignore.ts
|  └── lib/
|     ├── d.js
|     ├── d.ts
|     ├── e.js
|     └── e.ts
└── tsconfig.json

As you can see, the TypeScript compiler compiled all the input TypeScript files listed inside files array of tsconfig.json. You can’t see the ignore.js file since ignore.ts file was not included in the files array.

The directory where the tsconfig.json file is located is considered as the root of the project, AKA the root directory. You can also include a file from outside this root directory, such by including "../x.ts" in the files array where x would be in the parent directory of the root directory. Since the TypeScript compiler preserves the input file path, it will generate x.js in the parent directory of the root directory.

● include & exclude

The files option is great when you have relatively few files to work with. But when your project is big and contains hundreds of source files located in a nested directory structure, then handpicking file paths is not practical.

To solve this issue, we can use include option. This option is just like files, however, we can optionally provide glob patterns to locate input files. The exclude options behave the same, except it removes the files from the compilation that may have been included by the include option.

// tsconfig.json

{
    "include": [
        "a.ts",
        "src/**/*.ts"
    ],
    "exclude": [
        "./**/*/ignore.ts"
    ]
}

In the above tsconfig.json, we have removed the files option and added include which adds a.ts file from the root directory and all the .ts file from the src directory. Since this would also include any ignore.ts from the src directory, we have provided the exclude option that excludes any ignore.ts file from the compilation if located inside the src directory.

When we run the tsc command now, results won’t be any different since the files considered for the compilation both in the previous example and this example are the same.

/projects/sample/
├── a.js
├── a.ts
├── src/
|  ├── b.js
|  ├── b.ts
|  ├── c.js
|  ├── c.ts
|  ├── ignore.ts
|  └── lib/
|     ├── d.js
|     ├── d.ts
|     ├── e.js
|     └── e.ts
└── tsconfig.json

The TypeScript compiler automatically excludes files from the "node_modules", "bower_components", "jspm_packages" and "<outDir>" directories, where <outDir> is the value of outDir compiler-option provided by you. This prevents any .ts file from these directories getting included in the compilation process by accident.

#nodejs #typescript #deno #programming #javascript #deno

What is GEEK

Buddha Community

Beginner's Guide to Compilation in Java

Java applications are complied to bytecode then JIT and JVM takes care of code execution. Here you will find some insights about how JIT compiler works.

I am guessing that many of you use Java as your primary language in your day-to-day work. Have you ever thought about why HotSpot is even called HotSpot or what the Tiered Compilation is and how it relates to Java? I will answer these questions and a few others through the course of this article. I will begin this by explaining a few things about compilation itself and the theory behind it.

Turning Source Code to Machine Code

In general, we can differentiate two basic ways of translating human readable code to instructions that can be understood by our computers:

Static (native, AOT) Compilation

• After code is written, a compiler will take it and produce a binary executable file. This file will contain set of machine code instructions targeted for particular CPU architecture. Of course the same binary should be able to run on CPUs with similar set of instructions but in more complex cases your binary may fail to run and may require recompiling to meet server requirements. We lose the ability to run on multiple platforms for the benefit of faster execution on a dedicated platform.

Interpretation

• Already existing source code will be run and turned into binary code line by line by the interpreter while the exact line is being executed. Thanks to this feature, the application may run on every CPU that has the correct interpreter. On the other hand, it will make the execution slower than in the case of statically compiled languages. We benefit from the ability to run on multiple platforms but lose on execution time.

As you can see both types have their advantages and disadvantages and are dedicated to specific use cases and will probably fail if not used in the correct case. You may ask – if there are only two ways does it mean that Java is an interpreted or a statically compiled language?

#java #jvm #compiler #graalvm #hotspot #compilation #jit compiler #native image #aot #tiered compilation

TypeScript — Compilation & the TypeScript Compiler

TypeScript provides a command-line utility tsc that compiles (transpiles) TypeScript files (_.ts_) into JavaScript. However, the tsc compiler (short for TypeScript compiler) needs a JSON configuration file to look for TypeScript files in the project and generate valid output files at a correct location.

When you run tsc command in a directory, TypeScript compiler looks for the tsconfig.json file in the current directory and if it doesn’t find one, then it keeps looking up the directory tree until it finds one. The directory where the tsconfig.json is located is considered as the root of the project.

You can manually provide a path to the tsconfig.json file using --project or -p command-line flag. This file doesn’t need to have the tsconfig.json filename if you are using this flag with the exact file path. However, you can also provide the directory path that contains the tsconfig.json file.

$ tsc -p /proj/x/tsconfig.dev.json

If the TypeScript compiler fails to locate this configuration file, you would get an error. But you can provide settings enlisted in this file through the equivalent command-line options which we will cover in the next lesson.

Structure of tsconfig.json

So what does this file contain and what exactly it controls?

{
  "files": [
    "src/lib/person.ts",
    "src/lib/student.ts",
    "src/main.ts"
  ],
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist/development"
  }
}

The tsconfig.json file is a standard JSON file, however, it supports JSON5 specifications, so you can use comments, single quotes, and more. It contains some root-level options and some compiler options. The root-level options are options that are outside of the compilerOptions object, so in the above example, files is a root-level option.

The root-level options control how the project is presented to the TypeScript compiler, such as which TypeScript files to consider for the compilation. The compiler options contain settings for the TypeScript compiler such as where to output the compiled JavaScript files in the project directory.

---

ROOT-LEVEL OPTIONS

These options control how the project is presented to the TypeScript compiler for the compilation and static type analysis. These options must be kept outside compilerOptions object of the tsconfig.json file.

● files

The files array contains the location of the TypeScript files to consider for the compilation. These can be either relative paths or absolute paths on the disk. A relative path is located relative to the location of the tsconfig.json file (AKA root of the project).

/projects/sample/
├── a.ts
├── src/
|  ├── b.ts
|  ├── c.ts
|  ├── ignore.ts
|  └── lib/
|     ├── d.ts
|     └── e.ts
└── tsconfig.json

Let’s consider that we have the above directory structure in our project. As you can see, the TypeScript files (.ts) are located in multiple directories. We want to compile all the .ts files except the ignore.ts file. Hence we would provide relative paths of these files in the files options of tsconfig.json.

// tsconfig.json

{
    "files": [
        "a.ts",
        "src/b.ts",
        "./src/c.ts",
        "src/lib/d.ts",
        "./src/lib/e.ts"
    ]
}

You can also provide absolute paths of these files but relative paths are most recommended since they would be consistent on all the systems. All the relative paths are resolved against the path of tsconfig.json file in the project. You can optionally provide ./ or ../ prefix to locate the file.

Since we haven’t provided any compilerOptions values, all the default values for the compiler options are used which we will talk about in a bit. The TypeScript compiler compiles these files and outputs the JavaScript with .js extension by keeping the same file name as the individual input file.

The TypeScript compiler also preserves the original file path, hence the .js output file will be generated where the input file was in the directory structure. When you run the tsc command from the directory where your tsconfig.json file is located, you are going to see the result below.

/projects/sample/
├── a.js
├── a.ts
├── src/
|  ├── b.js
|  ├── b.ts
|  ├── c.js
|  ├── c.ts
|  ├── ignore.ts
|  └── lib/
|     ├── d.js
|     ├── d.ts
|     ├── e.js
|     └── e.ts
└── tsconfig.json

As you can see, the TypeScript compiler compiled all the input TypeScript files listed inside files array of tsconfig.json. You can’t see the ignore.js file since ignore.ts file was not included in the files array.

The directory where the tsconfig.json file is located is considered as the root of the project, AKA the root directory. You can also include a file from outside this root directory, such by including "../x.ts" in the files array where x would be in the parent directory of the root directory. Since the TypeScript compiler preserves the input file path, it will generate x.js in the parent directory of the root directory.

● include & exclude

The files option is great when you have relatively few files to work with. But when your project is big and contains hundreds of source files located in a nested directory structure, then handpicking file paths is not practical.

To solve this issue, we can use include option. This option is just like files, however, we can optionally provide glob patterns to locate input files. The exclude options behave the same, except it removes the files from the compilation that may have been included by the include option.

// tsconfig.json

{
    "include": [
        "a.ts",
        "src/**/*.ts"
    ],
    "exclude": [
        "./**/*/ignore.ts"
    ]
}

In the above tsconfig.json, we have removed the files option and added include which adds a.ts file from the root directory and all the .ts file from the src directory. Since this would also include any ignore.ts from the src directory, we have provided the exclude option that excludes any ignore.ts file from the compilation if located inside the src directory.

When we run the tsc command now, results won’t be any different since the files considered for the compilation both in the previous example and this example are the same.

/projects/sample/
├── a.js
├── a.ts
├── src/
|  ├── b.js
|  ├── b.ts
|  ├── c.js
|  ├── c.ts
|  ├── ignore.ts
|  └── lib/
|     ├── d.js
|     ├── d.ts
|     ├── e.js
|     └── e.ts
└── tsconfig.json

The TypeScript compiler automatically excludes files from the "node_modules", "bower_components", "jspm_packages" and "<outDir>" directories, where <outDir> is the value of outDir compiler-option provided by you. This prevents any .ts file from these directories getting included in the compilation process by accident.

#nodejs #typescript #deno #programming #javascript #deno

TypeScript: Superset Of JavaScript That Compiles to Clean JS Output

TypeScript

TypeScript is a language for application-scale JavaScript. TypeScript adds optional types to JavaScript that support tools for large-scale JavaScript applications for any browser, for any host, on any OS. TypeScript compiles to readable, standards-based JavaScript. Try it out at the playground, and stay up to date via our blog and Twitter account.

Find others who are using TypeScript at our community page.

Installing

For the latest stable version:

npm install -g typescript

For our nightly builds:

npm install -g typescript@next

Contribute

There are many ways to contribute to TypeScript.

• Submit bugs and help us verify fixes as they are checked in.
• Review the source code changes.
• Engage with other TypeScript users and developers on StackOverflow.
• Help each other in the TypeScript Community Discord.
• Join the #typescript discussion on Twitter.
• Contribute bug fixes.
• Read the archived language specification (docx, pdf, md).

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Documentation

• TypeScript in 5 minutes
• Programming handbook
• Homepage

Building

In order to build the TypeScript compiler, ensure that you have Git and Node.js installed.

Clone a copy of the repo:

git clone https://github.com/microsoft/TypeScript.git

Change to the TypeScript directory:

cd TypeScript

Install Gulp tools and dev dependencies:

npm install -g gulp
npm ci

Use one of the following to build and test:

gulp local             # Build the compiler into built/local.
gulp clean             # Delete the built compiler.
gulp LKG               # Replace the last known good with the built one.
                       # Bootstrapping step to be executed when the built compiler reaches a stable state.
gulp tests             # Build the test infrastructure using the built compiler.
gulp runtests          # Run tests using the built compiler and test infrastructure.
                       # You can override the specific suite runner used or specify a test for this command.
                       # Use --tests=<testPath> for a specific test and/or --runner=<runnerName> for a specific suite.
                       # Valid runners include conformance, compiler, fourslash, project, user, and docker
                       # The user and docker runners are extended test suite runners - the user runner
                       # works on disk in the tests/cases/user directory, while the docker runner works in containers.
                       # You'll need to have the docker executable in your system path for the docker runner to work.
gulp runtests-parallel # Like runtests, but split across multiple threads. Uses a number of threads equal to the system
                       # core count by default. Use --workers=<number> to adjust this.
gulp baseline-accept   # This replaces the baseline test results with the results obtained from gulp runtests.
gulp lint              # Runs eslint on the TypeScript source.
gulp help              # List the above commands.

Usage

node built/local/tsc.js hello.ts

Roadmap

For details on our planned features and future direction please refer to our roadmap.

Author: Microsoft
Source Code: https://github.com/microsoft/TypeScript 
License: Apache-2.0 License

#typescript #javascript 

What’s New In Typescript 4.0?

Today I am going to talk about new features in Typescript 4.0.

TypeScript 4.0 comes with lots of new features to make JavaScript development easier.

Labeled Tuple Elements

You can label tuple elements.

You can write:

type Range = [start: number, end: number];

to restrict args to have a string and a number.

you can also write:

type Foo = [first: number, second?: string, ...rest: any[]];

to have rest entries in your tuple.

If your tuple has type Foo, then the tuple starts with a number and a string.

Then the rest of the entries can be anything.

Labels don’t require you to name your variables differently when destructuring.

For example, if you have:

function foo(x: [first: string, second: number]) {
  const [a, b] = x;
}

then you can name the destructured variables anything you want.

#software-development #typescript-with-react #typescript #typescript-4 #react native

Microsoft Releases TypeScript 4.0 With Speed Boosting Features

icrosoft recently announced the availability of TypeScript version 4.0. The developers at the tech giant claimed that this version of the language represents the next generation of TypeScript with more expressivity, productivity as well as scalability.

Developed by the tech giant, TypeScript is an open-source programming language that is built on top of JavaScript by adding syntax for static type definitions. The types in this language provide a way to describe the shape of an object, providing better documentation as well as allowing TypeScript to validate that the code is working correctly.

According to the latest Stack Overflow Developers survey 2020, it secured the second position as the most loved language and  9th position among 25 programming languages as the most commonly used programming language by the developers. In one of our articles, we discussed how TypeScript weighs over other programming languages.

It is one of the fastest-growing programming languages among the developers. The motive behind this language is that while writing down the types of values and where they are used, developers can use TypeScript to type-check the code and let them know about mistakes before they run the code. TypeScript compiler can be used to strip away types from the code, leaving them with clean, readable JavaScript that runs anywhere.

In the present scenario, TypeScript is a core part of many developer’s JavaScript stack. The language adds optional types to JavaScript that support tools for large-scale JavaScript applications for any browser, for any host and on any operating systems.

The program manager of TypeScript, Daniel Rosenwasser, said in a blog post, “In our past two major versions, we looked back at some highlights that shined over the years. For TypeScript 4.0, we’re going to keep up that tradition.”

What’s New?

Based on the feedback by the developer’s community, TypeScript 4.0 includes many intuitive features that are focussed on boosting the performance of this language. Some of them are mentioned below-

Speed Improvements in build mode with –noEmitOnError

According to Rosenwasser, previously, compiling a program after a previous compile with errors under incremental would result in extremely slow performance when using the –noEmitOnError flag. The reason is, none of the information from the last compilation would be cached in a .tsbuildinfo file based on the –noEmitOnError flag.

But now TypeScript 4.0 changes this. The new update provides a great speed boost in these scenarios, and in turn, improves the build mode scenarios, which imply both –incremental and –noEmitOnError.

#developers corner #microsoft #microsoft releases typescript 4.0 #programming language #programming language with high salary #typescript #typescript 4.0