TypeScript — For Beginners

A Strongly Typed, Object Oriented, Compiled Language

Learning TypeScript Along with an Academind Tutorial

Install TypeScript

First, if you don’t already have it installed, install Node.js, by visiting https://nodejs.org/en/ and download the latest stable version of Node.js. After you have installed node, install the node package TypeScript with terminal command: npm i typescript . This packages installs the compiler that allows you to write TypeScript and then does the work converting it to JavaScript for you. To run the compiler, you’ll use command: npx tsc .

Application Set Up

Change directories into the folder where you’d like to set up you application. In the terminal type the following command to set up the program: mkdir <app name> . Then after you cd into this folder that you just made, type terminal commands: touch index.html and touch .gitignore . Open up your application in your text editor (for me the command is: code . ).

app.ts
package.json
npm start — lite-server

Core Types

Javascript has built in types, TypeScript gives us more types, and also gives us the ability to write custom types.

Javascript already knows these types:

  • number (no special types for integers, floats, etc.)
  • string (text with single or double quotes or backticks)
  • boolean (true / false)
app.ts

Typescript has these core types:

  • number
  • string
  • boolean
app.ts
hobbies → type: array
tuple type
enum type

Union Type

With union types, TypeScript allows us to use more than one data type for a variable or a function parameter:

union types

Literal Types

literal types

Void Type

The function doesn’t have a return statement, even though it successfully completes and console.logs, for example, but there is no return value.

Undefined Type

Function Type

Callbacks and Function Types

Unknown Type

Unknown, although a lot like the any type, is more restrictive.

Never Type

Never is another type that functions can return.

The TypeScript Compiler

The TS compile command: npx tsc <file-name>.ts is fine for working on small projects, with small files, but not feasible for large projects. It is possible to configure the compiler.

  • “lib” → specify which js library files/features to include in compilation
  • “sourceMap”: true → allows you to see the .ts files in the ‘Sources’ tab in the browser inspector
  • “outDir” → tell the program where the .js files (output files) should be stored in the file system. (ex: “./dist” for .js files when we store our .ts files in the ‘src’ folder)
  • “rootDir” → set to “./src” telling TypeScript to only look in the src folder for compiling
  • “removeComments” → can set to true and comments in .ts file won’t show up in .js file → making program smaller
  • “noEmitOnError” → not in the code, but can add. If you want to compile, despite having an error, set to false. True → problematic files will not be generated (it won’t actually compile any of the files if one has an error). Recommended to include and set to true.
  • “strict” → enables all strict TypeScripting options
  • “noImplicitAny” → ensures that we have to be clear about the params, we don’t want TypeScript to infer the params, fix errors by declaring type on your params.
  1. Typescript | “https://www.typescriptlang.org/
  2. Typescript | “https://www.npmjs.com/package/typescript
  3. Dynamic Typing | Mozilla | “https://developer.mozilla.org/en-US/docs/Glossary/Dynamic_typing

Software Engineer. A new addict of ReactJS & Javascript, CSS & APIs, with a little dabbling in Ruby, Ruby On Rails…