introduction-typescript.md

Typescript

https://zhongsp.gitbooks.io/typescript-handbook/ https://hackmd.io/s/rkITEOYX

Getting started

js

npm init
npm install -g tsc tslint typescript
tsc —-init
tslint --init

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "outDir": "./build",                      /* Redirect output structure to the directory. */
    "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
  }
}

tslint.json

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "quotemark": [
            true,
            "single"
        ],
        "semicolon": [
            true,
            "never"
        ],
        "no-console": false
    },
    "rulesDirectory": []
}

tsc --watch

react

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

npx create-react-app my-app --scripts-version=react-scripts-ts

Waht if third party does not support Typescript

https://basarat.gitbooks.io/typescript/docs/types/@types.html https://www.typescriptlang.org/docs/handbook/modules.html#working-with-other-javascript-libraries

What if it is a js file

test.js

export const hello = (name) => {
  return `hello ${name}`
}

test.d.ts

export function hello (name: string): string

https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-d-ts.html