TypeScript Recommendation - Welcome to new things

When I write JavaScript programs, I use TypeScript.

Originally, I had written JavaScript directly, but the React component I wanted to use was written in TypeScript, so I tried writing it in TypeScript to see how it worked.

I ended up not using that component, but TypeScript was useful and I have been writing in TypeScript ever since.

What is TypeScript?

TypeScript is a language developed by Microsoft that is compiled into JavaScript.

In the JavaScript community, there is a language called AltJS, which does not work on its own, but is used by converting it to JavaScript, and TypeScript is one of the AltJS languages.

It is more like a preprocessor for the C language than a language, and is more like a language extension that makes JavaScript easier to use.

I'm glad I went with TypeScript.

name-checking function

First of all, typos were eliminated and errors in execution were drastically reduced.

For example, suppose there is a typo in a variable or function name as follows.

function test(){
    console.log("TEST_01");
}

function run_01(){
    let str = "TEST_02";
    console.log( strrrr );    // strrrrrr is a typo.
}

function run_02(){
    testttt();    // testttt() is a typo.
}
    
run_01();    // An error is displayed here and it ends.
run_02();    // An error is displayed here and it ends.

When executed, an error occurs at the typo and execution ends there, but the error occurs when you actually try to execute the typo.

Conversely, the program will continue to run without error as long as the typo part is not called, so at first glance it appears to be working correctly.

Then, long after the program is up and running, the error occurs only when the typo part is called, where the typo is finally noticed.

TypeScript, on the other hand, as it has "Type" in its name, forces JavaScript to declare its type and name. So the above typo is immediately obvious because it will result in an error when compiling from TypeScript to JavaScript.

This has helped to drastically reduce errors and has made our work much more efficient.

downgrade function

Second, we no longer have to worry about JavaScript versions and can write programs in the latest JavaScript language specification.

Supported JavaScript versions vary depending on the browser and its version.

It is very difficult to write JavaScript while being aware of browser compatibility, so the JavaScript development community often writes code in the latest JavaScript language specification, compiles it, and uses a downgraded version of it.

Such downgrading of JavaScript is done by using "Bable", etc. Since TypeScript has a similar downgrading function, you can use TypeScript to write programs with the latest JavaScript version without any other settings. TypeScript also has a similar downgrade function, so you can write programs in the latest JavaScript version without any other settings.

Import Method

If you are using npm, npm install -g typescript will install.
- If you want to fix the version, you can use npm install --save-dev typescript for each package.json
The file extension is ".ts" and the execution command is "tsc".
- Type tsc test.ts to compile and generate "test.js".
TypeScript can be configured in a configuration file. The name of the configuration file is "tsconfig.json" and it should be placed under the folder where the "tsc" command is executed.
- tsconfig.json is not required.

What to do when you need help

setting (of a computer or file, etc.)

TypeScript configuration is quite troublesome, and even if you think you are writing a correct program, you may often get a compilation error.

Since tsconfig.json is a configuration file of options for the "tsc" command, modify tsconfig.json by referring to Optional Documentation.

External Modules

TypeScript requires a type definition, but the external modules installed by npm are written in JavaScript, so at compile time, an error may occur if there is no TypeScript definition for that module.

In such a case, try npm install --save-dev @types/module name since the definition may be distributed by npm under "@types/module name".

If you tried looking for "@types/module name" but did not find it, in your program, set the variable that reads the module to type "any" so that it will not cause an error even if it is not defined. (Example: const m:any = require(～);)

React

Until you get used to it, you can use create-react-app my-app --scripts-version=react-scripts-ts in "create-react-app" to create a TypeScript version of the React template, and I think you will have less trouble modifying the template based on that.

Reference

https://github.com/Microsoft/TypeScript-React-Starter

Incidentally, JSX can also be written inside TypeScript, in which case the extension is ".tsx".

ANY" in times of need

If a type-related error occurs

Make any type at the time of declaration, e.g., const test:any = 123;.
Type any at the point of use, e.g., console.log((test as any));.

the error subsides for the time being.

Personal Use Policy

TypeScript is just a language that extends JavaScript only partially where necessary, so it will work even if JavaScript is converted directly into TypeScript. (You may need to loosen TypeScript's compile settings, though.)

TypeScript has many additional language specifications that JavaScript does not have, such as enums, interfaces, generics, etc. However, we do not use many TypeScript-specific features and try to make it as close to plain JavaScript as possible.

TypsScript is sold on type definitions, so you may be offended, but we rarely use type definitions and declarations, and we use the "any" type.

The reason I use TypeScript is for the aforementioned typo checking, and it is not too much to say that I am using TypeScript only for this purpose.

Other

If you are using JavaScript but have recently become interested in TypeScript. If so, we recommend that you give it a try.

If you use JavaScript as-is with a TypeScript compiler to detect only typos, there is almost nothing to learn, and even so, I think TypeScript is well worth using.

bonus

TypeScript, like JavaScript, cannot be written and executed immediately, but requires a certain amount of preparation.

It is time-consuming to prepare each time, so we have created the following template and use it by copying the folder.

TypeScript source should be placed in the "src" folder, and npm run test will generate and execute JavaScript in the "build" folder.

structure

folder
- src
  - test.ts
- package.json
- tsconfig.json

test.ts

console.log('test');

package.json

{
  "scripts": {
    "build": "tsc",
    "start": "node ./build/test.js",
    "test": "npm run build && npm run start"
  },
  "devDependencies": {
    "@types/node": "",
    "typescript": ""
  }
}

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": true,
        "allowUnreachableCode": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "build",
        "baseUrl": ".",
        "paths": {
            "*": [
                "node_modules/*",
                "src/types/*"
            ]
        }
    },
    "include": [
        "src/**/*"
    ]
}