未経験からエンジニア 奮闘記

未経験からエンジニアに自由に生きる途中

MENU

Typescript 基本

Typescriptを勉強するにあたり

Typescriptは、型の推論をする事。 ジェネリクスが何となくわかればギリギリ戦える

型の種類

8つあるらしい。 ただ、最初は、Number、String、Boolean、Nullくらいで良い気がする

Undefined
Null
Boolean
Number
Bigint
String
Symbol
Object

基本的な、型の宣言方法

## 変数

// 宣言
let x: number;

// 宣言と代入
let x: number = 1;

let s = 1 // 実は、このように型をつけなくても、引数の値をみて、numberで推論してくれる

## type Aliases

これは、型を変数として扱い再利用可能にする

type Age = number

const age: Age = 82;

## 配列の型

書き方が2つある

の前に、中に入る要素を指定してあげる

let numberArr: number = // 配列の中身はnumberだけ numberArr = [1,2,3]

let strArr: string = // 配列の中身はstringだけ strArr = ["1","2","3"]

別の書き方

let arr: Array = arr = [ 1,2,3] // 数字だけを入れられる

## タプル型

// 配列に似ている。ただ、配列の中身を具体的に指定できる

let point: [number,string] = [2,"www"]

## 関数

// 引数と、返り値に型を渡す
function add(num1: number, num2:number):number {
  return num1 + num2
}

// 返り値がないものは、voidを返す
function hello():void {
  console.log("hello")
}

// ?で引数なくても良い


function add(num1: number, num2?: number){
  if (num2) {
    return num1 * num2
  } else {
    return num1 * num1
  }
}

add(3)
=> 9
add(3,4)
=> 12

// デフォルト値にも型をつける

function createPoint(x:number =0, y:number =0): number{
  return x * y
}

// 可長変引数

function joinNumbers(...nums: number[]): string {
  return nums.join('-');
}

// コールバック関数を引数にとる場合

function calcNum(num: number):number {
  return num * num
}

function multiple(num:number, callback: (num: number) => number) {
  return callback(num)
}

multiple(3, calcNum)
=> 9

ユニオン型

ユニオン型は、 or で型が取れる感じ

let variable: number | string;

ジェネリクス

動的な型をつけ 実行タイミング、型を渡し、渡したタイミングで、型を定義する

function id<T>(x: T):T {
  return x
}

id<number>(2) 
=> 2
id(2) // 引数から推論もされる
=> 2


## 一部をジェネリクスにもできる

function fillArray<T>(len: number, elem: T) {
  return new Array<T>(len).fill(elem);
}
  • 推論

方は引数などによって、推論される

関数で丁寧に書くと、こんな感じ。 引数にもnumber型、返り値にもnumberを与えてあげる

function add(num1: number, num2: number):number {
  return num1 + num2
}

ただ、返り値に、肩を指定しない場合、も引数にnumber型をあげているので、推論してくれる。 この原則を知っているといろんなところで理解が進む。

## 返り値に型を指定しない

function add(num1: number, num2: number){
  return num1 + num2
}

f:id:everydayProguramming:20200726204250p:plain

参考記事

2ality.com

この記事を読むときに調べた単語

  • at runtime 実行時
  • indfer 推論する
  • static types 静的型