1596666360
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.
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.
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
1624471200
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.
In general, we can differentiate two basic ways of translating human readable code to instructions that can be understood by our computers:
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
1596666360
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.
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.
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
1642064220
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.
For the latest stable version:
npm install -g typescript
For our nightly builds:
npm install -g typescript@next
There are many ways to contribute to TypeScript.
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.
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.
node built/local/tsc.js hello.ts
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
1601549700
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.
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
1599308024
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.”
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-
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