Basic Concepts#

GitHub This not show getting started with TypeScript. Steps a programm consistins of files are run

  1. Program (files) is parsed into abstract syntax tree (AST)
  2. AST is complied into bytecode
  3. Bytecode is evaluated by the runtime

TypeScript Compiler (TSC) compiles your code from TypeScript to JavaScript, it won't look at your types. After the TSC generates a AST for your programm - but before it emits code - it typechecks your code

./node_modules/.bin/tsc -version

tsconfig.json define things like which files should be compiled, which directory to compile them to anad which version of JavaScript to emit

{
  "compilerOptions": {
    "lib": ["ES2015"],
    "module": "CommonJS",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "target": "ES2015"
  },
  "include": ["src"]
}

  1. lib which APIs should TSC assume exist in the environment you will be runnning your code in, like ES5.

  2. module which module system should TSC compile your code to such as CommonJS, SystemJS, and ES2015

  3. outDir which folder should TSC put your generated code to (CommonJS, SystemJS, ES2015)

  4. target which JavaScript version should TSC compile your code to such as ES3, ES5, ES2015, ES2016

tslint.json containing your TSLint configuration, codifying whatever stylistic conventions you want for your code

{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

ts-node is a TypeScript execution engine and REPL for Node.js. It JIT transforms TypeScript into JavaScript, enabling you to directly execute TypeScript on Node.js without precompiling.

Running TypeScript on the server

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs"
  }
}

Running TypeScript on the browser requires more steps than running on the server.

Module Import#

  • Absolute import
  • Module import

Let try absolute import, here is tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

Import component

import Button from 'components/button'


export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  )
}

Then let try module import

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

Import component

import Button from "@/components/button";


export default function HomePage() {
  return (
    <>
      <h1>Hello World</h1>
      <Button />
    </>
  );

For running on the server with module import we need tsconfig-paths. Here is project structure

|--build
   |--my-module
      |--add.js
   |--src
      |--index.js
|--my-module
   |--add.ts
|--node_modules
|--src
   |--index.ts
|--tsconfig.json
|--package.json
npm add --dev tsconfig-paths

Then let run a main.ts

npx ts-node -r tsconfig-paths/register src/index.ts

Setup#

Let init a new project

npm init

Then install tsc, tslint and ts node

npm install --save-dev typescript tslint @types/node

Create tsconfig.json

{
  "compilerOptions": {
    "lib": ["ES2015"],
    "module": "CommonJS",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "target": "ES2015"
  },
  "include": ["src"]
}

Check tslin.json

{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

S3 Client#

Let create a s3 client and run it

import { ListBucketsCommand, S3Client } from '@aws-sdk/client-s3'


const listBucket = async () => {
  const client = new S3Client({ region: 'us-east-1' })
  const response = client.send(new ListBucketsCommand({}))
  console.log(response)
}


listBucket()

Now run it without compiling

npx ts-node src/index.ts

Reference#